<script lang="tsx">
import draggable from "vuedraggable";
import { defineComponent } from "vue";
import { cloneDeep } from "lodash";
import { inputComponents, selectComponents } from "../config";
import { FormConfigItem } from "../type";
let cloneConfig;
export default defineComponent({
  name: "Left",
  components: {
    draggable,
  },
  setup() {
    const compList = [
      { title: "输入", components: inputComponents },
      { title: "选择", components: selectComponents },
    ];
    let index = 0;
    function handleClone(config: FormConfigItem) {
      cloneConfig = cloneDeep(config);
      cloneConfig.index = index++;
      console.log(config, "复制了 config");
      return cloneConfig;
    }
    function handleEnd(obj: Element) {
      console.log(obj, "-----end");
    }
    return () => {
      return (
        <div class="left">
          <div class="">
            <div class="py-2 text-2xl">组件</div>
          </div>
          <el-collapse model-value={compList.map((v, i) => i + 1)}>
            {compList.map((comp, i) => {
              return (
                <el-collapse-item title={comp.title} name={i + 1}>
                  <draggable
                    list={comp.components}
                    group={{ name: "people", pull: "clone", put: false }}
                    item-key="placeholder"
                    sort={false}
                    clone={handleClone}
                    onEnd={handleEnd}
                    v-slots={{
                      item: ({ element }: any) => {
                        return (
                          <div class="box_item">{element.__config__.tag}</div>
                        );
                      },
                    }}
                  ></draggable>
                </el-collapse-item>
              );
            })}
          </el-collapse>
        </div>
      );
    };
  },
});
</script>
<style lang="less" scoped>
.left {
  width: 260px;
  border-right: 1px solid #d9d9d9;
  padding-left: 12px;
}

.box_item {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: pink;
  cursor: all-scroll;
  user-select: none;
}
</style>
